<template>
  <div>
    <div class="header">
      <van-nav-bar fixed>
        <template #left>
          <span>资讯头条</span>
        </template>
        <template #right>
          <van-icon name="search" size="18" color="#fff" @click="goSearch" />
        </template>
      </van-nav-bar>
      <div class="main">
        <van-tabs v-model="channelId" sticky animated offset-top="46px">
          <van-tab v-for="item in channelList" :key="item.id" :title="item.name" :name="item.id">
            <ArticleList :channelId="channelId" />
          </van-tab>
        </van-tabs>
        <van-icon name="plus" class="plus" @click="showDialog" />
        <van-popup class="channel_popup" v-model="show" @closed="onPopupClosed">
          <ChannelEdit @closeEV="closeFn" :userList="userChannelList" :unCheckList="unCheckChannelList"
            @addChannelEV="addChannelFn" @removeChannelEV="removeChannelFn" v-model="channelId" ref="channelEdit" />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import { userChannelAPI, getUserChannelAPI, removeTheChannelAPI, updateChannelsAPI } from '@/api/index'
import ChannelEdit from './ChannelEdit.vue'
import ArticleList from './components/ArticleList.vue'
export default {
  data () {
    return {
      channelId: 0,
      channelList: [], // 所有频道列表数据
      show: false, // 频道弹出层的显示/隐藏
      userChannelList: [] // 用户选择频道列表
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  created () {
    this.getChannel()
    this.getUserChannel()
  },
  methods: {
    async getChannel () {
      const res = await userChannelAPI()
      this.channelList = res.data.data.channels
    },
    showDialog () {
      this.show = true
    },
    closeFn (value) {
      this.show = value
    },
    /* 获取用户选择的频道 */
    async getUserChannel () {
      const res = await getUserChannelAPI()
      this.userChannelList = res.data.data.channels
    },
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      /* 问题: 为何只需要push, 不需要从下面数组里移除
还要把最新的数组, 发送给后台
数组里对象字段 -> 转换
推荐频道不能传递-删除出不是推荐频道剩下的频道对象
const newArr = this.userChannelList.filter(obj => obj.id !== 0)
newArr.forEach((obj, index) => {
    // delete 对象.属性 可以删除键值对
    delete obj.name
    obj.seq = index
})
const res = await updateChannelsAPI({
    channels: newArr
})
console.log(res)
上面的代码出问题, 新增时, 名字被删除了
原因: 所有数组里的对象, 都是同一个内存地址, 影响到ChannelEdit.vue中对象
解决方法 */
      const newArr = this.userChannelList.filter((obj) => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 拷贝(浅拷贝)
        delete newObj.name
        newObj.seq = index

        return newObj // 让map方法把新对象收集起来形成一个新数组
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    async removeChannelFn (channelObj) {
      console.log(channelObj)
      this.userChannelList.splice(this.userChannelList.findIndex(item => {
        return item.id === channelObj.id
      }), 1)
      const res = await removeTheChannelAPI({ channelId: channelObj.id })
      console.log(res)
    },
    onPopupClosed () {
      this.$refs.channelEdit.isEdit = false
    },
    goSearch () {
      this.$router.push('/search')
    }
  },
  computed: {
    unCheckChannelList () {
      const newArr = this.channelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => smallObj.id === bigObj.id)
        if (index > -1) { return false } else { return true }
      })
      return newArr
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #007bff;
  color: white;

  .van-icon {
    color: white;
  }
}

//::v-deep
/deep/ .van-tabs__content {
  padding-top: 44px;
}

.main {
  position: relative;
}

.plus {
  position: fixed;
  right: 0px;
  top: 58px;
  color: gray;
  padding: 2px 8px;
  z-index: 999;
  display: inline-block;
  background-color: #fff;
  font-size: 16px;
}

.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
